<template>
  <div>
    <!-- <h3>我是state: {{ $store.state.count }}</h3>
    <h3>我是getters: {{ $store.getters.newCount }}</h3>
    <div>
      <van-button @click="add(1)" type="info">+1</van-button>
      <van-button @click="add(5)" type="info">+5</van-button>
      <van-button @click="add(10)" type="info">+10</van-button>
      <van-button @click="del" type="info">--</van-button>
    </div> -->

    <!-- 购物车 -->
    <van-grid :column-num="2">
      <van-grid-item
        v-for="item in $store.state.list"
        @click="addItem(item)"
        :key="item.id"
        :icon="item.img"
        text="+"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  methods: {
    addItem(item) {
      // 普通文案
      // this.$toast('添加')
      // 成功
      this.$toast({
        type: "success",
        message: "添加成功"
      })
      this.$store.commit("ADD_CARLIST", {
        item
      })
    }
  }


  // methods: {
  //   add(num) {
  //     // 错误
  //     // this.$store.state.count += 1
  //     // 正确
  //     // 通过this.$store.commit("函数名(大写)", "传递的参数")来触发中mutations中定义的方法
  //     this.$store.commit("ADD_COUNT", {
  //       num
  //     })
  //   },
  //   del() {
  //     this.$store.commit("DEL_COUNT")
  //   }
  // }
};
</script>

<style>
</style>